<template>
  <div class="share-validate">
    <img class="bg-icon" src="@/assets/png/bg1.png" alt="" />
    <img class="earth-icon" src="@/assets/png/earth1.png" alt="" />
    <div class="share-validate-content">
      <el-input v-model.trim="pwd"></el-input>
      <el-button type="primary" @click="submit">确定</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { shareGenTicket } from '@/api/scene';
import { messageUtil } from '@jl/element-plus/utils';
import { useRoute, useRouter } from 'vue-router';
defineOptions({
  name: 'ScenePreviewValidate',
});
const route = useRoute();
const router = useRouter();
const pwd = ref<string>('');
let shareCode = '';

onMounted(() => {
  shareCode = 'SU-' + location.search.split('/SU-')[1];
});

function submit() {
  if (!shareCode) return;
  if (!pwd.value) {
    messageUtil.warning('请输入密码');
    return;
  }
  shareGenTicket({
    data: {
      accessPassword: pwd.value,
      shareCode,
    },
  }).then(() => {
    router.replace({ path: location.search.split('s_url=')[1] });
  });
}
</script>

<style lang="less" scoped>
.share-validate {
  width: 100%;
  height: 100%;
  background: #000;
  .bg-icon {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .earth-icon {
    position: absolute;
    left: 50%;
    top: 46%;
    transform: translate(-50%, -50%);
    width: 540px;
    height: 540px;
  }
  &-content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 700px;
    height: 84px;
    background: #ffffff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    padding: 20px;
    .el-input {
      --el-input-height: 44px;
    }
    .el-button {
      width: 112px;
      height: 40px;
      margin-left: 20px;
    }
  }
}
</style>
